<template>
	<!-- 顶部返回部分 -->
	<div class="home-essay">
		<div class="top">
			<nav-bar
				style="padding-top: 0.9375rem"
				title="mianfss"
				left-text=""
				fixed="true"
				left-arrow
				@click-left="onClickLeft"
			>
			</nav-bar>
			<p class="top-two">
				<notice-bar :text="data.title" />
			</p>
		</div>
		<div class="main">
			<div class="main-title">{{ data.title }}</div>
			<div class="main-nei">
				<p class="main-nei-left">超级课堂</p>
				<p class="main-nei-right">{{ data.createTime }}</p>
			</div>
			<div class="main-img">
				<img src="../01-Home/image/QQ图片.png" alt="" />
			</div>
			<div class="main-main" v-html="data.text"></div>
			<div class="main-gengXin">更新时间为：{{ data.updateTime }}</div>
		</div>
	</div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { NavBar, NoticeBar } from "vant";
import { localArticle } from "../API/jiang";
import axios from "../utils/request";
//路由,保存id为每次点击的单个id
import { useRoute } from "vue-router";
let route = useRoute();
const id = route.query;

//调用接口
const data = ref([]);
// 根据当前id获取数据
localArticle(id.id).then((res) => {
	data.value = res.data;
	console.log(data.value);
});
const router = useRouter();
const onClickLeft = () => {
	router.go(-1);
};
</script>
<style>
.home-essay {
	background-color: #fff;
}
.home-essay .main {
	background-color: #fff;
}
.home-essay .main-gengXin {
	width: 90%;
	margin: auto;
	text-align: right;
	color: gray;
	font-size: 0.8125rem;
}
.home-essay .main-nei {
	width: 90%;
	margin: auto;
	display: flex;
}
.home-essay .main-nei-left {
	color: var(--main-color);
	height: 1.375rem;
	line-height: 1.375rem;
}
.home-essay .main-nei-right {
	color: gray;
	height: 1.375rem;
	line-height: 1.375rem;
	margin-left: 0.4375rem;
	font-size: 0.9375rem;
}
.home-essay .main-img {
	width: 90%;
	margin: auto;
	height: 2.8125rem;
}
.home-essay .main-img img {
	width: 100%;
	height: 100%;
}
.home-essay .main-title {
	width: 90%;
	margin: auto;
	font-size: 1.5625rem;
	font-weight: normal;
}
.home-essay .main-main p {
	margin: 0.75rem 0;
}
.home-essay .main-main {
	width: 90%;
	margin: auto;
	line-height: 2.125rem;
}
.home-essay .top {
	width: 100%;
	height: 4.6875rem;
}

.home-essay .top-two {
	width: 35%;
	position: fixed;
	top: 0.9375rem;
	right: 33%;
	z-index: 11;
}
.home-essay .top .van-notice-bar {
	background-color: #fff;
}
</style>
